<template>
  <div class="CommonF">
    <el-row class="title-box" :gutter="20">
      <el-col :span="2">
        <el-button @click="back">
          <vui-icon icon="arrow-go-back-line" />
          返回
        </el-button>
      </el-col>
      <el-col :span="4">
        <div id="docno" class="grid-content bg-purple" style="margin-top: 6px">{{ $store.getters['bqmsData/budgetSheetNum'] }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple" style="margin-top: 6px">{{ headerTable[0] ? headerTable[0].CUSTOMER_NAME : '' }}</div>
      </el-col>
      <el-col :span="9">
        <el-button type="primary" @click="editBtn">
          <vui-icon icon="edit-line" />
          编辑信息
        </el-button>
      </el-col>
      <el-col :span="3">
        <div v-if="!isShow" class="grid-content bg-purple upDown" @click="UpDown(true)">
          展开
          <vui-icon icon="arrow-down-s-line" />
        </div>
        <div v-if="isShow" class="grid-content bg-purple upDown" @click="UpDown(false)">
          收起
          <vui-icon icon="arrow-up-s-line" />
        </div>
      </el-col>
    </el-row>
    <!-- <transition name="fade"> -->
    <table :class="{ open: isShow, close: !isShow }" style="margin-top: 10px">
      <tr v-for="(v, i) of settingJson.formTop.formData" :key="i" :style="{ width: v.with ? v.with : `33.3333%` }">
        <td :style="{ width: v.with ? `13.333333%` : `40% ` }">
          {{ v.label }}
        </td>
        <td v-if="headerTable[0]" :style="{ width: v.with ? `86.6666666666%` : `60% ` }">
          {{ headerTable[0][v.value] ? headerTable[0][v.value] : '' }}
        </td>
      </tr>
    </table>
    <!-- </transition> -->
    <!-- 编辑模态框 -->
    <el-dialog v-model="editDialog" title=" 编辑">
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules">
        <el-form-item v-for="(v, i) of settingJson.formTop.editDialog" :key="i" :label="v.label" :prop="v.prop">
          <el-input v-if="v.type == 'input'" v-model="dialogForm[v.prop]" />
          <el-select v-if="v.type == 'select'" v-model="dialogForm[v.prop]" placeholder="">
            <el-option v-for="(vv, ii) of v.option" :key="ii" :label="vv.label" :value="vv.value" />
          </el-select>
          <el-radio-group v-if="v.type == 'radios'" v-model="dialogForm[v.prop]">
            <el-radio-button v-for="(vv, ii) of v.radios" :key="ii" v-model="v.value" :label="vv.label" />
          </el-radio-group>
        </el-form-item>

        <div class="dialog-footer">
          <el-button size="medium" @click="editDialog = false">取 消</el-button>
          <el-button size="medium" type="primary" @click="editMsg">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import settingJson from '@/project/bqms/common/index'
  import { getList } from '../api/home'
  import { GFCD } from '@/utils/utils'
  export default {
    name: 'ComTable',
    data() {
      return {
        settingJson: settingJson,
        loadingReview: false,
        editDialog: false,
        dialogForm: {}, //模态框数据
        postUrl: '',
        headerTable: [],
        isShow: false,
      }
    },
    created() {
      this.postUrl = `${GFCD('bqms').domain}${GFCD('bqms').baseUrl}`
      this.topFormData()
      this.$sub(`topFormData`, (data) => {
        console.log('data', data)
        if (data) {
          this.topFormData()
        }
      })
    },
    methods: {
      // 返回
      back() {
        this.$router.push('/1301')
      },
      UpDown(bool) {
        console.log(bool)
        this.isShow = bool
      },
      //点击确定请求表头更新接口
      editMsg() {
        let method = 'bqms.budget.single.head.update'
        getList(this.postUrl, {
          method,
          data: JSON.stringify({
            CUSTOMER_NAME: this.dialogForm.CUSTOMER_NAME, //客户名称
            BUSINESS_TYPE: this.dialogForm.BUSINESS_TYPE, //业务类型
            TEMPERATURE_TYPE: this.dialogForm.TEMPERATURE_TYPE, //温度类型
            PLACE_SCALE: this.dialogForm.PLACE_SCALE, //场地规模
            CONSTRUCTION_TYPE: this.dialogForm.CONSTRUCTION_TYPE, //建设类型
            BE_CLOSED: this.dialogForm.BE_CLOSED, //实现封闭式
            CONFIGURATION_TYPE: this.dialogForm.CONFIGURATION_TYPE, //配置类型
            PRIORITY: this.dialogForm.PRIORITY, //优先级
            DOCNO: this.headerTable[0].DOCNO, //单号
          }),
        }).then((res) => {
          if (res.code == '00000') {
            this.editDialog = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            //刷新表头
            this.topFormData()
          }
        })
      },
      // 编辑按钮
      editBtn() {
        //显示表单的值
        this.editDialog = true
        //赋值
        this.dialogForm.CUSTOMER_NAME = this.headerTable[0].CUSTOMER_NAME
        this.dialogForm.BUSINESS_TYPE = this.headerTable[0].BUSINESS_TYPE
        this.dialogForm.TEMPERATURE_TYPE = this.headerTable[0].TEMPERATURE_TYPE
        this.dialogForm.PLACE_SCALE = this.headerTable[0].PLACE_SCALE
        this.dialogForm.CONSTRUCTION_TYPE = this.headerTable[0].CONSTRUCTION_TYPE
        this.dialogForm.BE_CLOSED = this.headerTable[0].BE_CLOSED
        this.dialogForm.CONFIGURATION_TYPE = this.headerTable[0].CONFIGURATION_TYPE
        this.dialogForm.PRIORITY = this.headerTable[0].PRIORITY
      },
      //通用单号
      topFormData() {
        let method = 'bqms.budget.sheet.header.query'
        getList(this.postUrl, {
          method,
          data: JSON.stringify({
            '#LIMIT#': 1,
            '#PAGE_SIZE#': 99999,
            DOCNO: this.$store.getters['bqmsData/budgetSheetNum'], //单号
          }),
        }).then((res) => {
          if (res.code == '00000') {
            this.headerTable = res.data[method].data
            this.$store.dispatch('bqmsData/setHeaderTable', this.headerTable[0])
            this.$pub(`changeHeadere`, true)
            //给最上面赋值
            // document.getElementById('docno').innerHTML = this.headerTable[0].DOCNO
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  @import '@bqms/static/scss/Common.scss';
  @import '@bqms/static/scss/ComTable.scss';
</style>
